<!DOCTYPE html>
<html>
	<head>
		<title>类别-添加/修改/明细</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- 所有的 css js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">

		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>

		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>

		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>
	</head>
	<body>
		<div class="vue-box" :class="{sbot: id}" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
					<div class="c-title">{{title}}</div>

					<el-form v-if="entity" :rules="rules" ref="data-table" label-width="100px" :model="entity"
						:disabled="show === 1">
						<el-form-item label="名称" prop="name">
							<el-input v-model="entity.name"></el-input>
						</el-form-item>

						<el-form-item label="父级" prop="parentId" v-if="parentId !== 0">
							<el-input v-model="parentName" :disabled="true"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</div>
		
		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					title: '数据添加',
					// 获取超链接中的id参数（0=添加，非0=修改）
					id: parseInt(sa.p('id', 0)),
					// 是否为展示状态，该状态下不可修改数据（1为展示状态）
					show: parseInt(sa.p('show', 0)),
					parentId: parseInt(sa.p('parentId', 0)),
					parentName: sa.p('parentName', ''),
					menus: [],
					// 实体对象
					entity: null,
					// 数据校验规则
					rules: {}
				},
				mounted: function() {
					axiosConfig(axios)
					this.init()
				},
				methods: {
					init() {
						// 初始化数据
						if (this.id <= 0) {
							this.entity = this.createModel();
						} else {
							this.title = this.show === 1 ? '数据查看' : '数据修改'

							let loading = elLoadding({
								that: this
							})

							let url = getUrl('pub-type', 'getOne', [this.id])
							let http = getHttp(axios, 'pub-type', 'getOne')
							http(url, {}).then(res => {
								this.entity = res
								loading.close();
							}).catch((err) => {
								sa.error(err.msg);
								loading.close();
							});
						}
					},

					// 创建一个 默认Model
					createModel: function() {
						return {
							name: '',
							parentId: this.parentId,
						}
					},

					// 提交数据
					ok: function() {
						if (this.show === 1) {
							sa.closeCurrIframe();
							return
						}

						let loading = elLoadding({
							that: this
						})

						this.$refs['data-table'].validate((valid) => {
							if (valid) {
								let loading = elLoadding({
									that: this
								})
								let params = fmtAToB(this.createModel(), this.entity)

								let url = getUrl('pub-type', this.id <= 0 ? 'add' : 'edit', this.id <= 0 ?
									undefined : [this.id])
								let http = getHttp(axios, 'pub-type', this.id <= 0 ? 'add' : 'edit')
								http(url, params).then(res => {
										this.entity = res
										loading.close()
										this.clean()
									})
									.catch((err) => {
										sa.error(err.msg)
										loading.close()
									});
							} else {
								sa.error('参数校验失败');
								return false;
							}
						});
					},

					// 添加/修改 完成后的动作
					clean: function() {
						parent.app.f5(); // 刷新父页面列表
						sa.closeCurrIframe(); // 关闭本页
					}
				}
			})
		</script>
	</body>
</html>
